{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>股票信息平台</title>
    <!-- plugins:css -->
    <link rel="stylesheet" href="{% static 'vendors/mdi/css/materialdesignicons.min.css' %}">
    <link rel="stylesheet" href="{% static 'vendors/base/vendor.bundle.base.css' %}">
    <!-- endinject -->
    <!-- plugin css for this page -->
    <link rel="stylesheet" href="{% static 'vendors/datatables.net-bs4/dataTables.bootstrap4.css' %}">
    <!-- End plugin css for this page -->
    <!-- inject:css -->
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
    <!-- endinject -->
    <script type="text/javascript" src="{% static 'js/echarts.min.js' %}"></script>
    <script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>

</head>
<body>
<div class="container-scroller">
    <!-- partial:partials/_navbar.html -->
    <nav class="navbar col-lg-12 col-12 p-0 fixed-top d-flex flex-row mr-1">
        <div class="navbar-brand-wrapper d-flex justify-content-center">
            <div class="navbar-brand-inner-wrapper d-flex justify-content-between align-items-center w-100">
                <a class="navbar-brand brand-logo" href="{% url 'index' %}"><img src="{% static 'images/logo.svg' %}"
                                                                                 alt="logo"/></a>
                <button class="navbar-toggler navbar-toggler align-self-center" type="button" data-toggle="minimize">
                    <span class="mdi mdi-sort-variant"></span>
                </button>
            </div>

        </div>
        <div class="navbar-menu-wrapper d-flex align-items-center justify-content-end">
            <ul class="navbar-nav navbar-nav-right">
                {% if request.user_obj %}
                    <ul class="nav-item nav-profile dropdown">
                        <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" id="profileDropdown">
                            {#                        <img src="{% static 'images/faces/face5.jpg' %}" alt="profile"/>#}
                            <i class="mdi mdi-account menu-icon"></i>
                            <span class="nav-profile-name">{{ request.user_obj.username }}</span>
                        </a>
                        <div class="dropdown-menu dropdown-menu-right navbar-dropdown"
                             aria-labelledby="profileDropdown">
                            <li class="dropdown-item">
                                <i class="mdi mdi-settings text-primary"></i>
                                <a href="#">管理中心</a>
                            </li>
                            <li class="dropdown-item">
                                <i class="mdi mdi-logout text-primary"></i>
                                <a href="{% url 'logout' %}">退 出</a>
                            </li>
                        </div>
                    </ul>
                {% else %}
                    <li class="nav-item dropdown mr-4">
                        <a class="nav-link count-indicator dropdown-toggle d-flex justify-content-center align-items-center"
                           href="{% url 'login' %}">
                            <span>登录</span>
                        </a>
                    </li>
                    <li class="nav-item dropdown mr-4">
                        <a class="nav-link count-indicator dropdown-toggle d-flex justify-content-center align-items-center"
                           href="{% url 'register' %}">
                            <span>注册</span>
                        </a>
                    </li>
                {% endif %}

            </ul>
            <button class="navbar-toggler navbar-toggler-right d-lg-none align-self-center" type="button"
                    data-toggle="offcanvas">
                <span class="mdi mdi-menu"></span>
            </button>
        </div>
    </nav>
    <!-- partial -->
    <div class="container-fluid page-body-wrapper">
        <!-- partial:partials/_sidebar.html -->
        <nav class="sidebar sidebar-offcanvas" id="sidebar">
            <ul class="nav">
                <li id="home" class="nav-item">
                    <a class="nav-link" href={% url 'index' %}>
                        <i class="mdi mdi-home menu-icon"></i>
                        <span class="menu-title">首页</span>
                    </a>
                </li>
                <li id="stock" class="nav-item">
                    <a class="nav-link" href={% url 'stock' %}>
                        <i class="mdi mdi-circle-outline menu-icon"></i>
                        <span class="menu-title">个股</span>
                    </a>
                </li>
                <li id="industry" class="nav-item">
                    <a class="nav-link" href={% url 'industry' %}>
                        <i class="mdi mdi-view-headline menu-icon"></i>
                        <span class="menu-title">行业</span>
                    </a>
                </li>
                <li id="stock_index" class="nav-item">
                    <a class="nav-link" href={% url 'stock_index' %}>
                        <i class="mdi mdi-chart-pie menu-icon"></i>
                        <span class="menu-title">指数</span>
                    </a>
                </li>
                <li id="company" class="nav-item">
                    <a class="nav-link" href={% url 'company' %}>
                        <i class="mdi mdi-grid-large menu-icon"></i>
                        <span class="menu-title">公司</span>
                    </a>
                </li>
                <li id="concept" class="nav-item">
                    <a class="nav-link" href={% url 'concept' %}>
                        <i class="mdi mdi-emoticon menu-icon"></i>
                        <span class="menu-title">概念</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="collapse" href="#auth" aria-expanded="false" aria-controls="auth">
                        <i class="mdi mdi-account menu-icon"></i>
                        <span class="menu-title">用户中心</span>
                        <i class="menu-arrow"></i>
                    </a>
                    <div class="collapse" id="auth">
                        <ul class="nav flex-column sub-menu">
                            <li class="nav-item"><a class="nav-link" href="{% url 'register' %}"> 注册 </a></li>
                            <li class="nav-item"><a class="nav-link" href="{% url 'login' %}"> 登录 </a>
                            </li>
                            <li class="nav-item"><a class="nav-link" href="{% url 'logout' %}"> 退出 </a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li id="qa_chat" class="nav-item">
                    <a class="nav-link" href={% url 'qa_chat' %}>
                        <i class="mdi mdi-android-debug-bridge menu-icon"></i>
                        <span class="menu-title">智能问答</span>
                    </a>
                </li>
            </ul>
        </nav>

        <div class="main-panel">
            <div class="content-wrapper">
                <div class="row">
                    <div class="col-lg-12 grid-margin stretch-card">
                        <div class="card">
                            <div class="card-body">
                                <div class="industry-list-container"
                                     style="padding: 10px 24px;background: #fff;line-height: 2;font-size: 14px;border-top: none;display: block;border: 1px solid #e2e6e7;box-shadow: 0 0 5px #e2e6e7;">
                                    <div class="industry-header"
                                         style="display: flex;align-items: center;cursor: pointer;">
                                        <b class="industry-icon"
                                           style="border-left: 3px solid #3b82f4;margin-right: 3px;font-size: 8px;transition: transform 0.3s;"></b>
                                        指数名称一览
                                    </div>
                                    <div class="industry-content"
                                         style="height: 0;overflow: hidden;transition:height 0.3s;display: block;">
                                        {% for name in stock_index_data %}
                                            <span>{{ name }}</span>
                                        {% endfor %}
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12 grid-margin stretch-card">
                        <div class="card">
                            <div class="card-body">
                                <h4 class="card-title">Line chart</h4>
                                <div id="container"
                                     style="height: 500px;margin-right: 20px;margin-top: 20px"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-5 grid-margin stretch-card">
                        <div class="card">
                            <div class="card-body">
                                <div class="leftFunction">
                                    <div class="searchBox"
                                    >
                                        <div class="title"
                                             style="height: 45px;line-height: 45px;margin: 0px auto;font-size: 17px;position: relative;display: block">
                                            <b style="border-left: 3px solid #3b82f4;margin-right: 3px;font-size: 8px"></b>
                                            指数查询
                                        </div>
                                        <form action="/app01/stock_index/" method="post">
                                            <div class="input-group">
                                                <input type="text" class="form-control" placeholder="请输入指数名称"
                                                       name="index_node">
                                                <div class="input-group-append">
                                                    {#                        <button class="btn btn-sm btn-primary" type="" value="指数查询">Search</button>#}
                                                    <input value="指数查询" type="submit"
                                                           class="btn btn-sm btn-primary">
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                    <div style="display: none"></div>
                                    <div class="resultArea"
                                         style="">
                                        <div class="title"
                                             style="height: 45px;line-height: 45px;margin: 0px auto;font-size: 17px;position: relative;display: block">
                                            <b style="border-left: 3px solid #3b82f4;margin-right: 3px;font-size: 8px"></b>
                                            查询结果
                                        </div>
                                        <div style="margin: 20px 0px">
                                            <input type="text" id="index_name" disabled="disabled" class="col-lg-12"
                                                   style="display: block;height: 41px;border-bottom: 1px solid #dee5ef;">
                                            <input type="text" id="index_up" disabled="disabled" class="col-lg-12"
                                                   style="display: block;height: 41px;padding: 15px 5px;border-bottom: 1px solid #dee5ef">
                                            <input type="text" id="index_amount" disabled="disabled" class="col-lg-12"
                                                   style="display: block;height: 41px;padding: 15px 5px;border-bottom: 1px solid #dee5ef">
                                            <input type="text" id="index_down" disabled="disabled" class="col-lg-12"
                                                   style="display: block;height: 41px;padding: 15px 5px;border-bottom: 1px solid #dee5ef">
                                            <input type="text" id="index_flow" disabled="disabled" class="col-lg-12"
                                                   style="display: block;height: 41px;padding: 15px 5px;border-bottom: 1px solid #dee5ef">
                                            <input type="text" id="index_average" disabled="disabled" class="col-lg-12"
                                                   style="display: block;height: 41px;padding: 15px 5px;border-bottom: 1px solid #dee5ef">
                                            <input type="text" id="index_quantity" disabled="disabled" class="col-lg-12"
                                                   style="display: block;height: 41px;padding: 15px 5px;border-bottom: 1px solid #dee5ef">
                                            <input type="text" id="index_newest" disabled="disabled" class="col-lg-12"
                                                   style="display: block;height: 41px;padding: 15px 5px;border-bottom: 1px solid #dee5ef">
                                            <input type="text" id="index_range" disabled="disabled" class="col-lg-12"
                                                   style="display: block;height: 41px;padding: 15px 5px;border-bottom: 1px solid #dee5ef">
                                            <input type="text" id="index_link" disabled="disabled" class="col-lg-12"
                                                   style="display: block;height: 41px;padding: 15px 5px;border-bottom: 1px solid #dee5ef">
                                            <input type="text" id="index_stock" disabled="disabled" class="col-lg-12"
                                                   style="display: block;height: 41px;padding: 15px 5px;border-bottom: 1px solid #dee5ef;">
                                            <input type="text" id="index_num" disabled="disabled" class="col-lg-12"
                                                   style="display: block;height: 41px;padding: 15px 5px;border-bottom: 1px solid #dee5ef">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-7 grid-margin stretch-card">
                        <div class="card">
                            <div class="card-body">

                                {% if ctx %}
                                    <div style="float:right;width: 800px;height: 700px;display: flex;align-items: center;line-height: 704px;margin-right: 70px;margin-top: 30px">
                                        <h1 style="margin:auto ">该数据库中未添加该实体</h1>
                                    </div>
                                {% else %}
                                    <div id="container_search1" class="col-lg-12"
                                         style="height: 700px;"></div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- content-wrapper ends -->
            <!-- partial:../../partials/_footer.html -->


            <footer class="footer">
                <div class="d-sm-flex justify-content-center justify-content-sm-between">
                    <span class="text-muted text-center text-sm-left d-block d-sm-inline-block">06 组 赵文琳 叶晓萱 秦红 饶书琪 </span>
                    <span class="float-none float-sm-right d-block mt-1 mt-sm-0 text-center"></span>
                </div>
            </footer>


            <!-- partial -->
        </div>
        <!-- main-panel ends -->
    </div>
    <!-- page-body-wrapper ends -->
</div>
<!-- container-scroller -->

<!-- plugins:js -->
<script src="{% static 'vendors/base/vendor.bundle.base.js' %}"></script>
<!-- endinject -->
<!-- Plugin js for this page-->
<script src="{% static 'vendors/chart.js/Chart.min.js' %}"></script>
<script src="{% static 'vendors/datatables.net/jquery.dataTables.js' %}"></script>
<script src="{% static 'vendors/datatables.net-bs4/dataTables.bootstrap4.js' %}"></script>
<!-- End plugin js for this page-->
<!-- inject:js -->
<script src="{% static 'js/off-canvas.js' %}"></script>
<script src="{% static 'js/hoverable-collapse.js' %}"></script>
<script src="{% static 'js/template.js' %}"></script>
<!-- endinject -->
<!-- Custom js for this page-->
<script src="{% static 'js/data-table.js' %}"></script>
<script src="{% static 'js/jquery.dataTables.js' %}"></script>
<script src="{% static 'js/dataTables.bootstrap4.js' %}"></script>
<script type="text/javascript">
    window.onload = function () {
        var homeNav = document.getElementById('home');
        var individualNav = document.getElementById('stock_index');

        // 移除已选中状态的样式类
        homeNav.classList.remove('active');

        // 添加选中状态的样式类
        individualNav.classList.add('active');

        var myChart_draw = echarts.init(document.getElementById('container'));
        var draw_data = [{{ draw_data|safe }}][0]
        console.log(draw_data);

        option = {
            tooltip: { // 添加提示框配置
                formatter: function (params) {
                    var data = params.data;
                    return `名称: ${data.name}<br>昨收: ${data.yesterday}<br>涨跌幅: ${data.range}`;
                }
            },
            dataset: {
                dimensions: ['yesterday', 'range'],//设置x轴和y轴的数据
                source: draw_data,
            },
            xAxis: {
                name: '昨收'
            },
            yAxis: {
                name: '涨跌幅(%)'
            },
            series: [
                {
                    type: 'scatter',
                    symbolSize: 50,
                    label: {
                        show: true,
                        position: 'inside',
                        color: '#FFFFFF',
                        formatter(params) {
                            return params.value.name
                        }
                    },
                    itemStyle: {
                        color: 'blue'
                    }
                }
            ]
        };

        myChart_draw.setOption(option);
    }
    document.addEventListener("DOMContentLoaded", function () {
        const header = document.querySelector(".industry-header");
        const icon = document.querySelector(".industry-icon");
        const content = document.querySelector(".industry-content");

        let isContentExpanded = false; // 初始化为收起状态

        header.addEventListener("click", function () {
            if (isContentExpanded) {
                content.style.height = "0";
                icon.style.transform = "rotate(0deg)";
            } else {
                content.style.height = content.scrollHeight + "px";
                icon.style.transform = "rotate(90deg)";
            }

            isContentExpanded = !isContentExpanded; // 切换状态
        });
    });

    var search_neo4j_data = [{{ index_neo4j_data|safe }}]
    {#var ctx = [{{ ctx|safe }}]#}
    var data2 = search_neo4j_data[0]['data']
    var links2 = search_neo4j_data[0]['links']
    console.log(data2)
    console.log(links2)
    var myChart2 = echarts.init(document.getElementById('container_search1'));
    var categories2 = [{name: "指数"}, {name: "股票"}, {name: "实例"}];
    option2 = {
        // 图的标题
        title: {
            text: '查询指数关系图谱'
        },
        // 提示框的配置
        tooltip: {
            position: [10, 10],
            formatter: function (params) {
                const data = params.data;
                const des = data.des;
                // 生成表格代码
                let tableHTML = '<div style="max-width: 300px; word-wrap: break-word; white-space: pre-wrap;">';
                // 设置最大宽度为 200 像素，并允许换行

                for (const key in des) {
                    if (des.hasOwnProperty(key)) {
                        const value = des[key];
                        tableHTML += `<div>${key}: ${value}</div>`;
                    }
                }
                tableHTML += '</div>';
                return tableHTML;
            }
        },

        // 工具箱
        toolbox: {
            // 显示工具箱
            show: true,
            feature: {
                mark: {
                    show: true
                },
                // 还原
                restore: {
                    show: true
                },
                // 保存为图片
                saveAsImage: {
                    show: true
                }
            }
        },
        legend: [{
            // selectedMode: 'single',
            data: categories2.map(function (a) {
                return a.name;
            })
        }],
        series: [{
            type: 'graph', // 类型:关系图
            layout: 'force', //图的布局，类型为力导图
            symbolSize: 40, // 调整节点的大小
            roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启
            edgeSymbol: ['circle', 'arrow'],
            edgeSymbolSize: [2, 10],
            edgeLabel: {
                normal: {
                    textStyle: {
                        fontSize: 20
                    }
                }
            },
            force: {
                repulsion: 2500,
                edgeLength: [10, 50]
            },
            draggable: true,
            lineStyle: {
                normal: {
                    width: 2,
                    color: '#4b565b',
                }
            },
            edgeLabel: {
                normal: {
                    show: true,
                    formatter: function (x) {
                        return x.data.name;
                    }
                }
            },
            label: {
                normal: {
                    show: true,
                    textStyle: {}
                }
            },

            // 数据
            data: data2,
            links: links2,
            categories: categories2,
        }]
    };
    myChart2.setOption(option2);
    document.getElementById("index_name").value = "指数名称:" + data2[0].name
    document.getElementById("index_up").value = "今开:" + data2[0].des["今开"]
    document.getElementById("index_amount").value = "昨收:" + data2[0].des["昨收"]
    document.getElementById("index_down").value = "成交量(万手):" + data2[0].des["成交量（万手）"]
    document.getElementById("index_flow").value = "成交额(亿元):" + data2[0].des["成交额（亿元）"]
    document.getElementById("index_average").value = "指数代码:" + data2[0].des["指数代码"]
    document.getElementById("index_quantity").value = "指数链接:" + data2[0].des["指数链接"]
    document.getElementById("index_newest").value = "最低价:" + data2[0].des["最低价"]
    document.getElementById("index_range").value = "最新价:" + data2[0].des["最新价"]
    document.getElementById("index_link").value = "最高价:" + data2[0].des["最高价"]
    document.getElementById("index_stock").value = "涨跌幅(%):" + data2[0].des["涨跌幅(%)"]
    document.getElementById("index_num").value = "涨跌额:" + data2[0].des["涨跌额"]

</script>
<!-- End custom js for this page-->
</body>

</html>


